<template>
	<el-checkbox-group v-model="options" class="permission-checkbox-group">
		<div v-for="(item, index) in permision" :key="item.id" class="checkbox-wrapper">
			<el-checkbox :label="item.id" style="width: 100%" :class="index >= 2 ? 'sub-checkbox' : ''" @change="e => onCheckbox(e, item)">
				{{ item.name }}
			</el-checkbox>
		</div>
	</el-checkbox-group>
</template>

<script>
import { getAllMenu } from '../../../api/api';
export default {
	components: {},
	props: {
		initPermission: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			options: [],
			permision: []
			// workbench operations sessions quality agent group form scene work system role
		};
	},
	watch: {
		initPermission: {
			immediate: true,
			handler: function (newVal) {
				this.options = newVal || [];
			},
			deep: true
		}
	},
	computed: {},
	mounted() {
		this.getAllMenu();
	},
	methods: {
		onCheckbox(value, data) {
			/* eslint-disable no-lonely-if */
			// { name: '工作台', id: '1' },
			// { name: '运营管理', id: '2' },
			// { name: '会话管理', id: '3' },
			// { name: '业务记录管理', id: '4' },
			// { name: '坐席管理', id: '5' },
			// { name: '分组管理', id: '6' },
			// { name: '表单管理', id: '7' },
			// { name: '业务场景管理', id: '8' },
			// { name: '通话规则', id: '9' },
			// { name: '系统配置', id: '10' },
			// { name: '账号及权限', id: '11' },
			// { name: '日志', id: '12' },
			// { name: '黑名单管理', id: '13' }
			// { name: '标签管理', id: '14' }
			// const opManagement = ['会话管理', '业务记录管理', '坐席管理', '分组管理', '表单管理', '业务场景管理', '通话规则', '系统配置', '账号及权限', '标签管理'];
			const opManagement = [3, 4, 5, 6, 7, 8, 9, 10, 13, 14];
			if (data.id === 2) {
				if (value) {
					this.options = this.options.concat(opManagement);
				} else {
					this.options = this.options.includes(1) ? [1] : [];
				}
			} else if (opManagement.includes(data.id)) {
				if (value) {
					if (!this.options.includes(2)) {
						this.options.push(2);
					}
				} else {
					if (this.options.includes(2)) {
						if (this.options.includes(1)) {
							if (this.options.length === 2) {
								this.options.splice(this.options.lastIndexOf(2), 1);
							}
						} else {
							if (this.options.length === 1) {
								this.options.splice(this.options.lastIndexOf(2), 1);
							}
						}
					}
				}
			}
			this.$emit('select', this.options);
		},
		getAllMenu() {
			this.permision = [];
			getAllMenu()
				.then(res => {
					const { code, data } = res.data;
					if (code === 200 && data && data.length > 0) {
						data.map(item => {
							this.parseData(item);
							if (item.children) {
								item.children.map(child => {
									this.parseData(child);
								});
							}
						});
					} else {
						console.warn('get all menu  ', res);
					}
				})
				.catch(err => {
					console.error('get all menu ', err);
				});
		},
		parseData(data) {
			let { code, rid, id, name } = data;
			// 去除账户管理和日志
			if (![11, 12].includes(rid)) {
				this.permision.push({ code, id: rid || id, name });
			}
		}
	}
};
</script>

<style lang="less" scoped>
.permission-checkbox-group {
	.checkbox-wrapper {
		margin: 6px 0 0 0;
	}
	.sub-checkbox {
		padding-left: 28px;
	}
}
</style>
